<template>
  <div class="p-5">
    <div class="chart">
      <div class="lefttask" v-loading="info_loading">
        <!-- 总飞行数据 -->
        <taskoverview :taskoverList="taskoverList" />
        <!-- 机型占比 -->
        <distributionEechart v-if="!info_loading" :modelType="modelType" />
        <!-- 飞行设备里程排名 -->
        <rankingview :rankingList="rankingList" />
      </div>
      <div class="centertask">
        <!-- 地图 -->
        <div class="distributionMap_box">
          <div class="distributionMap">
            <div class="img-box">
              <regionMap v-if="!info_loading" :airportList="airportList" :onlineList="onlineList" />
            </div>
          </div>
        </div>
        <!--每日飞行里程  -->
        <trendEechart v-if="!info_loading" :licheng="licheng" />
      </div>
      <div class="righttask" v-loading="info_loading">
        <!-- 设备总览 -->
        <equipmentview v-if="!info_loading" :equipmentList="equipmentList" />
        <!-- 飞行总览 -->
        <flightview :taskMoreList="taskMoreList" />
        <!-- 飞手飞行时常 -->
        <onlineview :loading="info_loading" :tableDataList="tableDataList" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import taskoverview from "./module/taskoverview.vue";
import distributionEechart from "./module/distributionEechart.vue";
import rankingview from "./module/rankingview.vue";
import trendEechart from "./module/trendEechart.vue";
import regionMap from "./module/regionMap.vue";

import analysisview from "./module/analysisview.vue";
import equipmentview from "./module/equipmentview.vue";
import flightview from "./module/flightview.vue";
import onlineview from "./module/onlineview.vue";
import { situationscreenInfo, getFlightData } from "#/api/daping/airport";
import { ElIcon, ElProgress, ElMessage } from "element-plus";


// import ampLocation from "../../../../components/ampLocation.vue";
// import { useUserStore } from "@vben/stores";
// import { openWindow } from "@vben/utils";
// const userStore = useUserStore();
const router = useRouter();
const getImageUrl = (name: string) => {
  return new URL(`../../../../assets/${name}`, import.meta.url).href;
};
const taskoverList = ref([
  {
    avatar: "svg:avatar-1",
    number: "128h36m23s",
    title: "飞行总时长",
  },
  {
    avatar: "svg:avatar-2",
    number: "12,263km",
    title: "飞行总距离",
  },
  {
    avatar: "svg:avatar-3",
    number: "364",
    title: "飞行总次数",
  },
]);
const modelType = ref([])
const rankingList = ref([]);
const licheng = ref([]);
const equipmentList = ref();
const taskMoreList = ref([
  {
    avatar: "svg:avatar-1",
    number: 2365,
    title: "任务总计",
  },
  {
    avatar: "svg:avatar-2",
    number: 12,
    title: "执行中",
  },
  {
    avatar: "svg:avatar-3",
    number: 23,
    title: "待执行",
  },
]);
const tableDataList = ref([]);
const onlineList = ref([]);
const airportList = ref([]);

const getinfo = async () => {
  const e = await situationscreenInfo({});
  if (e.code == 200) {
    airportList.value = e.data.onlineDevice
    onlineList.value = e.data.onlineDrone;
  } else {
    ElMessage.error(e.msg);
  }
};
const info_loading = ref(true)
const getinfo2 = async () => {
  const e = await getFlightData({});
  if (e.code == 200) {
    const data = e.data;
    // 飞行数据
    taskoverList.value[0].number = data.flight.flightTime + 's';
    taskoverList.value[1].number = data.flight.flightDistance + 'm';
    taskoverList.value[2].number = data.flight.flightNum;
    // 机型占比
    modelType.value = data.modelType
    // 飞行设备里程排名
    rankingList.value = data.rankList
    // console.log(data)
    licheng.value = data.distance
    // 设备总览
    equipmentList.value = data.device

    onlineList.value = e.data.onlineDrone;
    airportList.value = e.data.onlineDevice;
    tableDataList.value = e.data.flightDynamics;
    setTimeout(() => {
      info_loading.value = false
    }, 100);
  } else {
    ElMessage.error(e.msg);
  }
};


onMounted(() => {
  // getinfo();
  getinfo2();
});
</script>
<style>
.el-scrollbar__wrap {
  width: auto;
}
</style>
<style lang="scss" scoped>
.ElProgress0 {
  :deep(.el-progress-bar__outer) {
    border-radius: 0;
    // background: radial-gradient(ellipse 140% 300% at 100% 50%, rgba(36, 38, 50, 0.2) 28%, rgba(36, 38, 50, 0.7) 100%);
    background: rgb(36, 38, 50);
    height: 1vh !important;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 0;
    background: radial-gradient(ellipse 100% 150% at 100% 50%,
        rgba(36, 229, 241, 1) 28%,
        rgba(36, 229, 241, 0) 100%);
    height: 1vh !important;
  }

  :deep(.el-progress__text) {
    font-size: 0.8vw !important;
    margin-left: 0.2vw;
    min-width: 2vw;
  }
}

.p-5 {
  height: 100%;
  padding: 0.5vh 0.5vw;
  font-size: 1vw;
  color: #fff;

  .header {
    height: 40px;
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    color: #fff;
    text-align: center;
  }

  .chart {
    display: flex;
  }
}

.lefttask {
  width: 30%;
  position: relative;
  overflow: hidden;
  z-index: 3;
}

.centertask {
  width: 40%;
  overflow: hidden;
  position: relative;

  .distributionMap_box {
    height: 56vh;
  }

  .distributionMap {
    width: 100%;
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 8vh;
    left: 0;
    width: 100vw;
    height: 90vh;
    overflow: hidden;
    // border: 1px solid #fff;

    .img-box {
      position: absolute;
      // width: 48vw;
      // height: 55vh;
      top: -30vh;
      left: 0;
      width: 100vw;
      height: 120vh;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.righttask {
  width: 30%;
  position: relative;
  overflow: hidden;
  z-index: 3;
}
</style>
